<template>
    <div>
        <div v-for="(e, eIndex) in eventList" :key="eIndex" style="margin: 20px;">
            <el-card shadow="hover">
                <el-row>
                    <el-col :span="8">
                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image" @click="showEvent(e)">
                    </el-col>
                    <el-col :span="16">
                        <div class="event-name" @click="showEvent(e)">
                            <h1>{{e.title}}</h1>
                        </div> 
                            <h3 class="event-status">{{e.status}}</h3>
                            <h3>时间：{{e.start_time}} 至 {{e.end_time}}</h3>                        
                            <h3>地点：{{e.location}}</h3>
                    </el-col>                   
                </el-row>
            </el-card>
        </div>
    </div>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
    data() {
        return {
            eventList: [],
            
        }
    },
    created() {
        this.getMyEvents();
    },
    computed: {
        ...mapGetters([
            'userId',
            'username',
            'address',
        ]),
    },
    methods: {
        showEvent(event) {
            this.$router.push({
                name: "myEvent", 
                params: event
            });
            
        },
        getMyEvents() {
            this.api({
                url:"/event/getEventsOfOrganizer",
                method: "post",
                data: {organizer_id: this.userId}
            }).then(data => {
                this.eventList = data.info;

                let now = Date.now();
                for (let i = 0; i < this.eventList.length; i++) {
                    let startTime = new Date(this.eventList[i].start_time).getTime();
                    let endTime = new Date(this.eventList[i].start_time).getTime();
                    if (now < startTime) {
                        this.eventList[i].status = '未开始';
                    } else if (now < endTime) {
                        this.eventList[i].status = '正在进行';
                    } else {
                        this.eventList[i].status = '已结束';
                    }
                }
            }).catch((err) => {
                console.log('err:',err)
                this.$message.error("获取活动失败")
            })
        }
    },
}
</script>

<style scoped>
.event-status {
    font-size: 18px;
    color: #E6A23C;
}

.event-name {
    cursor: pointer;
}

.image {
    cursor: pointer;
}
</style>